<template>
  <div class="box">

    <div class="sliderBox">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="(slider, i) in sliderPic" :key="i">
          <img :src="slider" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="style">
      <router-link
        :to="
          '/song?id=' +
          c.id +
          '&categoryName=' +
          c.name +
          '&pageNo=' +
          1
        "
        v-for="(c, i) in ctg"
        :key="i"
        v-show="i < 11"
      >
        {{ c.name }}
      </router-link>
      <router-link to="/song" class="more">更多</router-link>
    </div>

    <div class="hotSong">
      <div class="title">
        <h2>热门歌单</h2>
        <router-link to="/song" class="more">更多</router-link>
      </div>
      <el-carousel indicator-position="outside" :autoplay="false">
        <el-carousel-item>
          <div class="info" v-for="(info, k) in info" :key="k" v-show="k < 5">
            <router-link :to="'/song/' + info.id">
              <div class="pic">
                <img v-lazy="info.coverImgUrl" alt="" />
              </div>
              <p>{{ info.name }}</p>
              <div class="play"><span></span></div>
            </router-link>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="info" v-for="(info, k) in info" :key="k" v-show="k > 4">
            <router-link :to="'/song/' + info.id">
              <div class="pic">
                <img v-lazy="info.coverImgUrl" alt="" />
              </div>
              <p>{{ info.name }}</p>
              <div class="play"><span></span></div>
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>


    <div class="hotAlbum">
      <div class="title">
        <h2>新歌首发</h2>
        <router-link to="/albums" class="more">更多</router-link>
      </div>
      <el-carousel indicator-position="outside" :autoplay="false">
        <el-carousel-item>
          <div class="info">
            <router-link to="/albums"  v-for="(a, k) in album" :key="k" v-show="k < 6">
              <div class="albumBox">
                  <div class="pic">
                      <img :src="a.pic" alt="">
                      <div class="bg"><img src="../assets/play.png" alt=""></div>
                  </div>
                  <div class="intro">
                      <p class="songName">{{a.title}}</p>
                      <p class="singerName" v-for="(n,i) in a.artist" :key="i" v-show="i<1">{{n.name}}</p>
                  </div>
              </div>
            </router-link>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="info">
            <router-link to="/albums"  v-for="(a, k) in album" :key="k" v-show="k > 5">
              <div class="albumBox">
                  <div class="pic">
                      <img :src="a.pic" alt="">
                      <div class="bg"><img src="../assets/play.png" alt=""></div>
                  </div>
                  <div class="intro">
                      <p class="songName">{{a.title}}</p>
                      <p class="singerName" v-for="(n,i) in a.artist" :key="i"  v-show="i<1">{{n.name}}</p>
                  </div>
              </div>
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    

    <div class="hotSinger">
            <div class="title">
                <h2>热门歌手</h2>
                <router-link to="/singer" class="more">更多</router-link>
            </div>
             <div class="infos">
                <div class="singer" v-for="(s,i) in singers" :key="i">
                    <router-link :to="'/singer/' + s.id">
                        <div class="pic">
                            <img v-lazy="s.picUrl" alt="">
                        </div>
                        <div class="name">{{s.name}}</div>
                    </router-link>
                </div>
            </div>
    </div>


  </div>
</template>


<script>

export default {
  data() {
    return {
      info: "",
      singers: "",
      album: '',
      sliderPic: [
        require("../assets/slider1.jpg"),
        require("../assets/slider2.jpg"),
        require("../assets/slider3.jpg"),
        require("../assets/slider4.jpg"),
        require("../assets/slider5.jpg"),
        require("../assets/slider6.jpg"),
        require("../assets/slider7.jpg"),
        require("../assets/slider8.jpg"),
      ],
      ctg: "",
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getData();
      vm.getInfo();
      vm.getSinger();
      vm.getAlbum();
    });
  },
  methods: {
    getRandomArrayElements(arr, count) {
        var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return shuffled.slice(min);
    },
    getData() {
      this.axios.get(`https://autumnfish.cn/playlist/hot`).then((res) => {
        console.log(res);
          this.ctg = res.data.tags;
        });
    },
    getInfo() {
      var url = `https://autumnfish.cn/top/playlist/highquality?limit=10`;
      this.axios.get(url).then((res) => {
        this.info = res.data.playlists
      });
    },
    getSinger() {
      var url = `https://autumnfish.cn/top/artists`;
      this.axios.get(url).then((res) => {
        var arr = res.data.artists
        this.singers = this.getRandomArrayElements(arr,6)
      });
    },
    getAlbum(){
        var url = `https://music.taihe.com/v1/album/list?sign=2ca11dec389a49866ada355b5a3ba454&pageSize=50&appid=16073360&timestamp=1613788244`
        this.axios.get(url).then((res) => {
            var arr = res.data.data.result
            console.log(arr);
            this.album = this.getRandomArrayElements(arr,12)
        });
    }
  },
};
</script>


<style scoped>
    a {
    text-decoration: none;
    color: #606266;
    }
    ::v-deep .hotSong .el-carousel__arrow {
    top: 35%;
    }
    ::v-deep .hotAlbum .el-carousel__arrow {
    top: 45%;
    }
    ::v-deep .hotSong .el-carousel__arrow--left,
    ::v-deep .hotAlbum .el-carousel__arrow--left {
    left: -80px;
    }
    ::v-deep .hotSong .el-carousel__arrow--right,
    ::v-deep .hotAlbum .el-carousel__arrow--right {
    right: -80px;
    }
    ::v-deep .hotSong .el-carousel__indicators--outside {
    display: block;
    margin-top: -20px;
    }
    ::v-deep .hotAlbum .el-carousel__indicators--outside{
    display: block;
    margin-top: 20px;
    }
    .hotSong .title,
    .hotSinger .title,
    .hotAlbum .title {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    }
    .hotSong .el-carousel {
    box-sizing: border-box;
    width: 100%;
    padding: 0 140px;
    margin: 0 auto;
    }
    .hotSong .el-carousel__item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    }
    .hotSong .el-carousel__item .info {
    position: relative;
    width: 18%;
    }
    .hotSong .el-carousel__item .info a {
    display: flex;
    flex-direction: column;
    }
    .hotSong .el-carousel__item .info a .pic {
    width: 100%;
    height: 224px;
    overflow: hidden;
    }
    .hotSong .el-carousel__item .pic img {
    width: 100%;
    height: 100%;
    }
    .hotSong .el-carousel__item .info a p {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 10px 0;
    }
    .hotSong .info:hover .play {
    display: block;
    }
    .hotSong .info .play {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: -80px;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;
    }
    .hotSong .info .play span {
    border: 15px solid transparent;
    border-left: 20px solid #c89977;
    display: inline-block;
    margin-left: 18px;
    position: absolute;
    top: 25%;
    left: 6%;
    }
    .hotSong .info:hover img {
    transform: scale(1.05);
    }
    .hotSong .info img {
    width: 100%;
    height: 224px;
    transition: all 0.6s;
    }

    .hotAlbum .el-carousel {
    box-sizing: border-box;
    width: 100%;
    padding: 0 140px;
    margin: 0 auto;
    }
    .hotAlbum .el-carousel__item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    }
    .hotAlbum .info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    }
    .hotAlbum .info a{
    width: 30%;   
    }
    .hotAlbum a .albumBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    }
    .hotAlbum .pic{
    width: 120px;
    height: 120px;
    }
    .hotAlbum .pic .bg{
    position: absolute;
    width: 120px;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 20px;
    transition: all .4s;
    }
    .hotAlbum .pic:hover .bg{
    left: 28px;
    }
    .hotAlbum .pic img{
    width: 100%;
    height: 100%;
    }
    .hotAlbum .intro{
    width: 60%;
    }
    .hotAlbum .intro p {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 10px 0;
    }
    .hotAlbum p.songName:hover{
    color: red;
    }
    .hotAlbum p.singerName{
    color: #909399;
    }




    .sliderBox {
    width: 80vw;
    margin: 0 auto;
    margin-top: 50px;
    }
    .sliderBox .el-carousel__item img {
    width: 100%;
    height: 100%;
    }

    .style {
    width: 80vw;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    }
    .style a:not(:nth-last-child(1)) {
    text-decoration: none;
    color: #606266;
    background: #f8f8f8;
    padding: 10px 30px;
    border-radius: 20px;
    }
    .more {
    text-decoration: none;
    color: #606266;
    padding: 10px 20px;
    }

    .hotSinger .infos{
        display: flex;
        width: 80vw;
        margin: 0 auto;
        justify-content: space-between;
    }
    .infos .singer{
        flex-direction: column;
        width: 16%;
        justify-content: center;
        padding: 20px 0;
        cursor: pointer;
    }
    .infos .singer .name{
        text-align: center;
    }
    .infos .pic{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 180px;
        overflow: hidden;
    }
    .infos img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .infos img:hover{
        transform: scale(1.02);
        transition: all .6s;
    }
    
</style>